<template>
  <div class="home">
    <div class="top">
      <div class="top-t">
        <span>
          <img class="img-l" src="@/assets/images/Customerpage/返回.png" alt />
        </span>
        <span>
          <img class="img-r" src="@/assets/images/Customerpage/首页按钮.png" alt />
        </span>
      </div>
      <p>
        省点心吧你
        <van-icon name="like-o" />
      </p>
    </div>
    <div>
      <div class="homelist">
        <Homelist :arr="arr"></Homelist>
      </div>
    </div>
    <Footer></Footer>
    <div></div>
  </div>
</template>

<script>
import Homelist from "@/components/home/homelist";
import gh from "@/assets/images/Home/客户关怀.png";
import kh from "@/assets/images/Home/我的客户.png";
import sh from "@/assets/images/Home/收货单.png";
import wl from "@/assets/images/Home/物流单.png";
import xx from "@/assets/images/Home/消息中心.png";
import Footer from "@/components/common/Footer";
export default {
  data() {
    return {
      arr: [
        { img: gh, name: "客户关怀", path: '/careuser', ename: 'CUSTOMER' },
        { img: kh, name: "我的客户", path: '/homes', ename: 'MY CLIENTS' },
        { img: sh, name: "收货单", path: '/homes', ename: 'RECEIVING' },
        { img: wl, name: "物流单", path: '/homes', ename: 'LOGISTICS' },
        { img: xx, name: "消息中心", path: '/homes', ename: 'NEWS' },
      ],
    };
  },
  components: {
    Homelist,
    Footer,
  },
};
</script>

<style lang="less" scoped>
.home {
  padding-bottom: 100px;
  .homelist {
    background-color: #eee;
  }
}
.top {
  height: 400px;
  background-color: #093399;
  p {
    text-align: center;
    font-size: 60px;
    color: #fff;
    line-height: 180px;
  }
}

.top-t {
  display: flex;
  justify-content: space-between;
  span {
    margin: 30px;
  }
  .img-l {
    width: 25px;
  }
  .img-r {
    // padding-left: 20px;
    width: 50px;
  }
}
</style>

